import { useEffect,Fragment} from "react";
import {IRouteComponentProps, TagModelState, useDispatch, useSelector } from "umi";
import StickyCardRead from '../../components/stickyCardRead'
import StickyCardClassify from '../../components/stickyCardClassify'
import {Link} from 'react-router-dom'
const TagListDetail:React.FC<IRouteComponentProps<{id:string}>> = ({match})=>{
  const id = match.params.id;
  
  // 通过useSelector获取model数据
  const tagDetail = useSelector((state: { tagList: TagModelState}) => state.tagList.tagDetailList);
  // 通过useDispatch获取dispatch
  
  const dispatch = useDispatch();

  useEffect(()=>{
    dispatch({
      type: 'tagList/getTagDetail',
      payload: id
    })
  }, []);
  const tag = useSelector((state: { tagList: TagModelState }) => state.tagList);
  // 通过useDispatch获取dispatch
  useEffect(()=>{
    dispatch({
      type:'tagList/getTagList'
    })
  },[])
  console.log('awdawdadawd',tagDetail);

  return <Fragment>
    {/* 头部组件 */}
    <div className="tagDetailHeader"></div>
    <div className="tagDetailBox">
    <div className="tagDetailBody">
      <div className="tagDeatilContainer">
        <div className="tagDetailContainerBox">
          <div className="tagDetailContainerBoxleft">
            <div className="tagDetailContainerBoxleftTop">
              <p>与<span>{tagDetail?tagDetail.label:''}</span>标签有关的文章</p>
              <p>共搜索到<span>0</span>篇</p>
            </div>
            <div className="tagDetailContainerBoxleftCenter">
              <div className="tagDetailContainerBoxleftCenterTop">
                <span>文章标签</span>
              </div>
              <ul>
                {
                  tag.tagList&&tag.tagList.map((item,index)=>{
                    return <li className={tagDetail.label==item.label?'tagDetailContainerBoxleftCenterActive':''}>
                      <Link to={item.label}>{item.label} [{item.articleCount}]</Link>
                    </li>
                  })
                }
              </ul>
            </div>
            <div className="tagDetailContainerBoxleftBottom">
              <main><div>
                <div className="tagDetailContainerBoxleftBottomSecondBox">
                  <div className="empty">
                    暂无数据
                  </div>
                </div>
                </div></main>
            </div>
          </div>
          <div className="tagDetailContainerBoxright">
            <StickyCardRead></StickyCardRead>
            <StickyCardClassify></StickyCardClassify>
          </div>
        </div>
      </div>
    </div>
    <footer className="tagDetailfooter"></footer>
    </div>
    </Fragment>
  
}

export default TagListDetail;